<template>
  <div class="kecheng-main">
    <div class="kecheng-up">
      <div class="kecheng-left">
        <EchartBar :XAxis="XAxis" :YAxis="YAxis" :xData="dataKechengBar.barXData" :barData="dataKechengBar.barYData" :barColor="barColor" :barBgColor="barBgColor" :barGrid="barGrid" :seriesLabel="seriesLabel" :barBgShow="barBgShow" :barWidth="barWidth" :dataAxis="dataAxis"></EchartBar>
      </div>
      <div class="kecheng-right">
        <ElTable :tableConfig="dataShequZNH.config" :tableData="dataShequZNH.tableData" :canScroll="canScroll" :tableInterval="tableInterval"></ElTable>
      </div>
    </div>
    <div class="kecheng-down">
      <DapingNotice :notice="dataNotice"></DapingNotice>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ElTable from "@/components/ElTable.vue";
import { request } from '@/api/request.js'
import EchartBar from "@/components/EchartBar.vue";
import DapingNotice from '@/components/DapingNotice.vue'
export default {
  name: 'ViewKecheng',
  data() {
    return {
      tableInterval:3000,
      canScroll:false,
      nclass:"notice100",
      dataShequZNH: [],
      dataKechengBar:{},
      barXData:[],
      barYData:[],
      dataNotice: [],
      dataAxis: 'y',
      barGrid: {
        left: '10%',
        right: '10%',
        top: '5%',
        bottom: '20%'
      },
      seriesLabel: {
        show: true,
        position: 'top',
        color: '#17dddb',
        fontFamily: 'shuziFont',
        fontSize: 10,
      },
      baseseriesLabelFontSize:14,
      seriesLabelFontSize:14,
      barBgShow: false,
      barWidth: '40%',
      YAxis: {
        type: 'value',
        show: false,
        axisLabel: {
          show: false
        }
      },
      XAxis: {
        type: 'category',
        data:'',
        // data: ['书法', '十字绣', '象棋', '烹饪', '茶艺', '拉丁舞', '电脑'],
        inverse: false,
        axisLabel: {
          // 浅色系用色--#0f7261，深色系用色--#c5e1f0
          color: '#c5e1f0',
          fontSize: 10,
          margin:8,
          interval: 0,
          rotate: -20
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      baseAxisLabelFontSize:10,
      axisLabelFontSize:10,
      baseAxisLabelMargin:8,
      axisLabelMargin:8,
      barColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#208cd0' },
          { offset: 0.2, color: '#126da7' },
          { offset: 1, color: '#3b4659' }
        ]),
      barBgColor: '#a7cec0'
    }
  },
  mounted() {
    this.getKecheng();
    this.getNotice();
    this.getKechengChart();
  },
  methods: {
    getKecheng() {
      request({
        url: '/kechengTable',
        method: 'get'
      }).then(res => {
        this.dataShequZNH = res.data;
      })
    },
    getKechengChart() {
      request({
        url: '/kechengchart',
        method: 'get'
      }).then(res => {
        this.dataKechengBar = res.data;
      })
    },
    getNotice() {
      request({
        url: '/noticekecheng',
        method: 'get'
      }).then(res => {
        this.dataNotice = res.data;
      })
    }
  },
  components: {
    ElTable,
    EchartBar,
    DapingNotice
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          this.XAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.YAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.barColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.$store.state.colors.barColor },
            { offset: 0.3, color: this.$store.state.colors.barColorGuodu },
            { offset: 1, color: this.$store.state.colors.barColorEnd }
          ]);
          this.XAxis.axisLabel.fontSize = this.baseAxisLabelFontSize * parseFloat(this.$store.state.htmlScale);
          this.XAxis.axisLabel.margin = this.baseAxisLabelMargin * parseFloat(this.$store.state.htmlScale);
          this.seriesLabel.fontSize = this.baseseriesLabelFontSize * parseFloat(this.$store.state.htmlScale);
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.kecheng-main {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  border: 0px solid red;
  .kecheng-up{
    width: 100%;
    height: 70%;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
    .kecheng-left {
      width: 60%;
      height: 100%;
      box-sizing: border-box;
    }

    .kecheng-right {
      width: 40%;
      height: 16.5rem;
      overflow: hidden;
      box-sizing: border-box;
      border: 0px solid blue;
    }
  }
  .kecheng-down{
    width: 100%;
    height: 14%;
  }
  
}
</style>